<template>
	<view class="runningEvent">
		<!-- 导航栏 -->
		<view class="nav_bar">
			<view class="nav_left">
				<image class="nav_left_img" src="../../static/icons/clock.png" mode="widthFix"></image>
				<text>00:00:00</text>
			</view>
			<text>800米测试</text>
			<view class="right_btn">
				<uni-icons class="right_arrow" type="close" ></uni-icons>
				<text>结束测试</text>
			</view>
		</view>
		<view class="cardsCon">
			<view class="peopleCard" v-for="(item , index ) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]">
				<text class="badge_font">{{ item}}</text>
				<text>_分_秒</text>
			</view>
		</view>
		<view class="bottom_btn">
			<myBtn  title="各就位" color="#0aa1ed" width="25vw" height="7vh"></myBtn>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,reactive } from "vue";
	let reactive_obj = reactive({
		class_list:[
		]as any[],//班级列表
	})
	
	let loading = ref(false)

	const goAddFace = () => {
		uni.navigateTo({
			url:"/pages/addStudentsPicture/addStudentsPicture"
		})
	}
</script>

<style>
.runningEvent{
	width: 100vw;
}
.nav_bar{
		width: 100vw;
		box-sizing: border-box;
		height: 11vh ;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 3vw ;
		padding-top: 3vh;
		position: fixed;
		top: 0;
		z-index: 10000;
		justify-content: space-between;
	}
	.title_font{
		margin: auto;
	}
	.nav_left{
		display: flex;
		align-items: center;
		background-color: #c8c8c8;
		font-size: 1.1rem;
		padding: 1vh 0.5vw;
	}
	.nav_left_img{
		width: 2vw;
		margin-right: 1vw;
		flex-shrink: 0 ;
	}
	.right_btn{
		display: flex;
		align-items: center;
		border: 1px solid #0aa1ed ;
		padding: 1vh 1vw ;
		color: #0aa1ed;
		font-size: 0.8rem;
		border-radius: 2vw;
	}
	.right_arrow{
		color: #0aa1ed !important;
	}
	.cardsCon{
		display: flex;
		flex-wrap: wrap;
		width: 94vw;
		margin: 0 auto;
		padding: 11vh 0 13vh 0 ;
	}
	.peopleCard{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		position: relative;
		width: 22vw ;
		height: 20vh;
		margin: 2vh 1.5vw 0 0;
		background-color: #fff;
		border-radius: 1vw;
	}
	.badge_font{
		display: block;
		width: 3vw;
		background-color: #d6eded;
		color: #0aa1ed;
		text-align: center;
		padding: 0.5vh 0.5vw;
		position: absolute;
		top: 0 ;
		left: 0;
		border-radius: 1vw 0 0 0;
	}
	
	.bottom_btn{
		width: 100vw;
		box-sizing: border-box;
		height: 11vh ;
		background-color: #fff;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		z-index: 10000;
		justify-content: space-evenly;
		
	}
</style>
